<template>
	<view>
		<view class="task-block">
			<view class="task-title">
				<input type="text" v-model="task.title" placeholder="请输入标题">
			</view>
			<view class="task-desc">
				<view class="task-item">
					<view class="title">
						选择分类：
					</view>
					<uni-data-picker style="width: 500rpx;" popup-title="请选择分类" :localdata="cateList" @change="changeCategory"
						:clear="false"></uni-data-picker>
				</view>
				<view class="task-item">
					<textarea class="line-textarea" type="text" :placeholder="'请输入信息'" v-model="addDesc"></textarea>
				</view>
			</view>
			<view class="upload-block">
				<view class="image-list">
					<view class="item" v-for="(v,k) in fileList" :key="k">
						<text class="iconfont iconclose_cricle del-btn" @click.stop="delFile(k)"></text>
						<view class="iconfont iconexcel" v-if="v.type.indexOf('xls')>-1" style="color: #31c090;"></view>
						<view class="title">
							{{v.name}}
						</view>
					</view>
				</view>
				<view class="add-block">
					<view class="iconfont iconjia1" @click.stop="selectUploadType"></view>
					<view class="tips">
						上传文档
					</view>
				</view>
			</view>
		</view>
		<view class="button-group">
			<button class="btn-color" size="mini" @click="submit">上 传</button>
		</view>

		<uni-popup ref="popupCenter">
			<view class="upload-type-list">
				<view class="item" @click.stop="selectFile">
					从聊天中选取文档
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	const QQMapWX = require('@/utils/qqmap-wx-jssdk.min')
	import bottomPopup from '@/components/bottomPopup';
	import $scss from "@/uni.scss"
	export default {
		components: {
			bottomPopup
		},
		data() {
			return {
				$scss,
				addDesc: "",
				task: {
					taskId: "",
					title: "",
					desc: [],
					endTime: "",
					fileList: [],
					classList: [],
					sum: 0,
					personList: [],
					createTime: 0,
					optOpenid: "",
					optName: ""
				},
				fileList: [],
				classList: [],
				selectType: '',
				cateList: [{
						text: "一年级",
						value: "1-0",
						children: [{
								text: "1.1班",
								value: "45451-14546"
							},
							{
								text: "1.2班",
								value: "14545-4542"
							}
						]
					},
					{
						text: "二年级",
						value: "2-0"
					},
					{
						text: "三年级",
						value: "3-0"
					}
				],
				userInfo: {},
				latitude: '',
				longitude: '',
			};
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.getProject()
		},
		onShow() {
			// this.getLocation()
		},
		methods: {
			changeCategory(e){
				console.log(e)
			},
			async getProject() {
				let classList = await this.$cloud.getData('ws_project', {
					page: 1,
					limit: 5,
					where: {
						teacherList: this.$cloud._.elemMatch({
							_openid: this.$cloud._.eq(this.userInfo._openid),
						})
					},
					orderBy: ['createTime', 'desc']
				})
				let arr = []
				classList.map(v => {
					arr.push({
						text: v.school + v.title,
						value: v.projectId
					})
				})
				this.classList = arr
			},
			onUp(k) {
				let temp = JSON.parse(JSON.stringify(this.task.desc[k - 1]))
				this.task.desc[k - 1] = JSON.parse(JSON.stringify(this.task.desc[k]))
				this.task.desc[k] = temp
				this.$forceUpdate()
			},
			delFile(k) {
				uni.showModal({
					title: `是否确认删除第${k+1}个文件？`,
					confirmText: '确认删除',
					success: (r) => {
						if (r.confirm) {
							this.task.fileList.splice(k, 1)
						}
					}
				})
			},
			selectUploadType() {
				this.$refs.popupCenter.open()
			},
			addTask() {
				if (!this.addDesc) return;
				if (!this.task.desc.includes(this.addDesc)) {
					this.task.desc.push(this.addDesc)
				}
				this.addDesc = ""
			},
			setDesc(e) {
				this.task.desc[e.currentTarget.dataset.k] = e.detail.value
			},
			async selectImage() {
				let fileList = await this.$tools.chooseMedia()
				let arr = []
				fileList.map(v => {
					let has = this.fileList.findIndex(e => e.path == v.tempFilePath)
					if (has == -1 && v.size < (3 * 1024 * 1024)) {
						arr.push({
							name: "",
							path: v.tempFilePath,
							type: v.fileType
						})
					}
				})
				this.$refs.popupCenter.close()
				this.fileList = arr.concat(this.fileList)
			},
			async selectFile() {
				let fileList = await this.$tools.chooseMessageFile(1,['xls','xlsx'])
				let arr = []
				fileList.map(v => {
					let type = v.path.split('.')[1]
					let has = this.fileList.findIndex(e => e.path == v.path)
					if (has == -1 && v.size < (3 * 1024 * 1024)) {
						arr.push({
							name: v.name,
							path: v.path,
							type
						})
					}
				})
				this.$refs.popupCenter.close()
				this.fileList = arr.concat(this.fileList)
			},
			async submit() {
				if (!this.task.title) return this.$msg(this.getInfoTypeTitle() + '标题必须为填写')
				if (!this.task.endTime) return this.$msg('结束时间必须为选择')
				if (!this.task.classList.length) return this.$msg('发布班级必须为选择')
				if (!this.task.desc.length) return this.$msg(this.getInfoTypeTitle() + '信息必须为填写')
				this.task.taskId = (Date.now()).toString()
				this.task.optOpenid = this.userInfo._openid
				this.task.optName = this.userInfo.name ? this.userInfo.name : this.userInfo.nickName
				this.task.optPhone = this.userInfo.phone
				this.task.createTime = Date.now()
				this.classList.map(v => {
					if (this.task.classList.includes(v.projectId)) {
						this.task.sum += v.studentList.length
					}
				})
				try {
					for (let i = 0; i < this.task.desc.length; i++) {
						if (!this.task.desc[i]) {
							throw new Error(this.getInfoTypeTitle() + (i + 1) + '条信息必须为填写')
						}
					}
				} catch (e) {
					this.$msg(e.message)
					return;
				}

				let res = await this.$cloud.addData('ws_task', this.task)
				if (!res) return this.$msg('操作失败')
				if (res && this.fileList.length) {
					uni.showLoading({
						title: "请求中..."
					})
					try {
						this.fileList.map(async (v, k) => {
							let fileID = await this.$cloud.uploadFile(this.task.taskId + '_task_' + this
								.$tools.guid(16) + '.' + v.type, v
								.path);
							if (fileID)
								v.path = fileID
							if (k == this.fileList.length - 1) {
								let r = await this.$cloud.editData('ws_task', {
									taskId: this.task.taskId
								}, {
									fileList: this.fileList
								})
								uni.hideLoading()
								this.$msg(r ? '操作成功！' : '操作失败')
							}
						});
					} catch (e) {
						uni.hideLoading()
						return this.$msg(e.message)
					}
				}
			},
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						this.latitude = res.latitude
						this.longitude = res.longitude
						this.locationShow = false
					},
					fail: err => {
						this.locationShow = true
					}
				});

			},
			navigation(addr) {
				let storeInfo = uni.getStorageSync('storeInfo')
				if (!storeInfo.qqMapKey) {
					this.$pub.msg('地图密钥未设置!')
					return;
				}
				let qqmapsdk = new QQMapWX({
					key: storeInfo.qqMapKey
				});
				qqmapsdk.geocoder({
					address: addr,
					success: (res) => {
						uni.openLocation({
							latitude: res.result.location.lat,
							longitude: res.result.location.lng,
						})
					},
				})
			},

		}
	};
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
		padding-bottom: 200rpx;
	}

	.task-block {
		background: #fff;
		margin: 25rpx;
		padding: 25rpx;
		border-radius: 15rpx;

		.task-title {
			padding: 20rpx 0;
			border-bottom: 1rpx #eee solid;
		}

		.task-desc {
			.task-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 25rpx;

				.title {
					color: #555;
					font-size: 30rpx;
					margin-bottom: 15rpx;
				}

				.uni-select {
					width: 95%;
				}

				.uni-select__input-text {
					width: 95%;
				}

				input {
					color: #333;
					width: 80%;
					padding: 10rpx 15rpx;
					font-size: 28rpx;
					border: 1rpx #ccc solid;
					border-radius: 8rpx;
				}

				.line-textarea {
					width: 80%;
				}

				.opt-line {
					display: flex;
					flex-direction: column;
				}

				.iconfont {
					font-size: 55rpx;
					color: $themeColor;
				}

				.del-btn {
					color: $errorColor;
				}
			}

			.select-date {
				.uni-icons {
					display: none;
				}

				color: #555;
				font-size: 28rpx;

				input {
					padding: 0 15rpx;

				}
			}
		}
	}

	.upload-block {
		margin: 30rpx 0 20rpx 0;

		.image-list {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 40rpx;

			.item {
				margin-top: 40rpx;
				position: relative;
				color: #555;
				display: flex;
				align-items: center;
				border: 1rpx #ccc solid;
				border-radius: 6rpx;
				width: 650rpx;

				.title {
					font-size: 28rpx;
				}

				.img {
					width: 660rpx;
				}

				.del-btn {
					position: absolute;
					top: -30rpx;
					right: -30rpx;
					font-size: 45rpx;
					color: $errorColor;
					z-index: 9879;
				}
			}
		}

		.iconfont {
			color: #777;
			font-size: 100rpx;
		}

		.add-block {
			display: flex;
			align-items: center;
		}

		.tips {
			margin-left: 15rpx;
			font-size: 28rpx;
			color: #666;
		}
	}

	.upload-type-list {
		background: #fff;
		padding: 35rpx 25rpx;
		border-radius: 25rpx;

		.item {
			color: #222;
			text-align: center;
			padding: 25rpx;
			border-bottom: 1rpx #ccc solid;
		}
	}

	.button-group {
		margin: 55rpx 0;
		width: 100%;
		display: flex;
		justify-content: center;

		.btn-color {
			width: 50%;
			border-radius: 45rpx;
		}
	}

	.auth-block {
		height: 300rpx;

		.tips {
			margin-top: 30rpx;
			font-size: 28rpx;
			color: #999;
			padding: 20rpx 50rpx 0 50rpx;
		}

		.opt-btn {
			width: 492rpx;
			height: 70rpx;
			background: rgba($color: $themeColor, $alpha: 0.8);
			border-radius: 35rpx;
			font-size: 28rpx;
			color: rgba(#fff, 0.9);
			margin-top: 80rpx;
		}
	}

	.addr-popup-box {
		position: relative;
		padding: 30rpx 0 0 0;

		.addr-title {
			position: relative;
			text-align: center;
			padding-bottom: 20rpx;
			line-height: 40rpx !important;
			font-size: 35rpx;
			color: #555;
			font-weight: bold;
		}

		.addr-close {
			position: absolute;
			right: 30rpx;
			color: #888;
			font-size: 40rpx;
			z-index: 8888;
		}
	}

	.addr-btn {
		width: 80%;
		margin-left: 10%;
		height: 80rpx;
		line-height: 80rpx;
		background: $themeColor;
		color: #fff;
		text-align: center;
		font-size: 30rpx;
		border-radius: 40rpx;
		margin-bottom: 50rpx;
	}

	// 地址
	.address-opt {
		font-size: 30rpx;
		display: flex;
		align-items: center;

	}

	.address-opt view {
		margin-right: 25rpx;
		color: #222;
	}

	.address-opt .iconfont {
		font-size: 30rpx;
		color: #333;
		margin-right: 5rpx;
	}

	label {
		font-size: 28rpx;
	}

	.radio {
		transform: scale(0.8);
	}

	.address {
		width: 100%;
		background: #fff;
		margin: 50rpx 0;
	}

	.address-top {
		position: relative;
		background: #fff;

		.iconfont {
			font-size: 45rpx;
			position: absolute;
			right: 30rpx;
			top: 20rpx;
		}
	}

	.address-main {
		width: 600rpx;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		line-height: 86rpx;
		padding-left: 30rpx;

	}

	.address-name {
		max-width: 450rpx;
		min-width: 120rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.address-tel {
		margin-left: 10rpx;
	}

	.address-label {
		padding: 5rpx 8rpx;
		flex-shrink: 0;
		background: $themeColor;
		border-radius: 6rpx;
		color: #fff;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
		line-height: 25rpx;
		transform: scale(0.8);
		transform-origin: center center;
		margin-right: 6rpx;
	}

	.address-detail {
		font-size: 24rpx;
		word-break: break-all;
		padding-bottom: 25rpx;
		padding-left: 25rpx;
		padding-right: 120rpx;
		display: flex;

		.addr-info {
			width: 80%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}


	.opt-block {
		display: flex;
		justify-content: flex-end;
		border-top: 1rpx #eee dashed;
		padding: 20rpx 0 10rpx 0;
		margin-top: 15rpx;

		.opt-btn {
			padding: 6rpx 18rpx;
			color: $themeColor;
			border: 1rpx solid $themeColor;
			border-radius: 15rpx;
			font-size: 24rpx;
			margin-right: 15rpx;
		}
	}

	.order-top {
		width: 100%;
		overflow: hidden;
		padding: 24rpx 35rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: $themeColor;
		font-size: 28rpx;
		color: #fff;

		.order-top-left {
			display: flex;
			align-items: center;

			.iconfont {
				font-size: 40rpx;
			}

			.right {
				font-size: 26rpx;

				.tips {
					font-size: 35rpx;
					font-weight: bold;

					text {
						font-size: 25rpx;
					}
				}

				.info {
					display: flex;
					align-items: center;
					position: relative;
					width: 680rpx;

					.content {
						width: 70%;
					}

					.location {
						position: absolute;
						right: 0;
						z-index: 999;
					}
				}
			}
		}
	}


	.opt-tabbar {
		width: 100%;
		min-height: 110rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-wrap: wrap;
		padding: 20rpx 10rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		z-index: 8888;
	}

	.red-btn {
		color: #fff !important;
		background: $themeColor;
		border-color: $themeColor !important;
	}

	.tag-btn {
		padding: 6rpx 16rpx;
		color: $themeColor;
		border: 1rpx solid $themeColor;
		border-radius: 15rpx;
		font-size: 24rpx;
		margin: 0 20rpx 0 0;
	}

	.opt-tabbar::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d9d9d9;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.share-btn {
		background: $themeColor;
		color: #fff;
		width: 60%;
		margin-left: 20%;
		font-size: 24rpx;
		text-align: center;
		height: 65rpx;
		line-height: 65rpx;
		border-radius: 15rpx;
	}

	.btn-hover {
		opacity: 0.8;
	}

	.show-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		margin: 20rpx 0;
		padding: 15rpx 30rpx;
		font-size: 26rpx;
		color: #555;

		.show-item {
			.line {
				width: 680rpx;
				position: relative;
				display: flex;

				.iconfont {
					position: absolute;
					right: 0;
					z-index: 999;
					color: $themeColor;
				}

				.val {
					display: inline-block;
					width: 80%;
				}
			}
		}
	}



	.yr-list {
		margin-top: 15rpx;
		background: #fff;
		padding: 15rpx 0;
	}

	.clamp {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
	}

	.yr-list-cell {
		display: flex;
		align-items: center;
		padding: 5rpx 30rpx 0 35rpx;
		position: relative;

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30rpx;
		}

		.cell-icon {
			height: 32rpx;
			width: 32rpx;
			font-size: 22rpx;
			color: #fff;
			text-align: center;
			line-height: 32rpx;
			background: #f85e52;
			border-radius: 4rpx;
			margin-right: 12rpx;
		}

		.cell-tit {
			flex: 1;
			font-size: 24rpx;
			color: #555;
			margin-right: 10rpx;
		}

		.cell-tip {
			font-size: 26rpx;
			color: #303133;

			&.disabled {
				color: #909399;
			}

			&.active {
				color: $themeColor;
			}

			&.red {
				color: $themeColor;
			}
		}

		&.desc-cell {
			.cell-tit {
				max-width: 90rpx;
			}

			border-top: 1rpx #eee solid;
		}

		.desc {
			flex: 1;
			font-size: 25rpx;
			color: #303133;
		}
	}
</style>